<script setup>
import { listAPI, deldateAPI, upExamineAPI } from '@/api/system/wxUser.js'
import { reactive } from 'vue'
const { proxy } = getCurrentInstance()

// visitorRecord_state
// 列表数据
const tableData = ref([])

// 接待人下拉
const receptionSel = ref([])

const formValue = ref({})

const ruleFormRef = ref(null)

const selectForm = ref([
  { type: '日期范围' },
  { label: '手机号', type: '输入框', model: 'phone' },
  { label: '名称', type: '输入框', model: 'name' },
  {
    label: '身份',
    type: '下拉单选',
    model: 'isExamine',
    opt: [
      {
        label: '具有审核资格',
        value: '2',
      },
      {
        label: '不具备资格',
        value: '0',
      },
      {
        label: '待确认',
        value: '1',
      },
    ],
  },
])

// 列表枚举
const column = ref([
  { label: '名称', prop: 'name' },
  { label: '电话', prop: 'phone' },
  { label: '身份', prop: 'isExamine' },
  { label: '创建时间', prop: 'createTime' },
  { label: '操作', prop: 'x', width: '240' },
])

const state = reactive({
  title: '新增',
  total: 0, // 列表总数
  loading: false,
  btnLoading: false,
})

// 修改
const edit = async (id) => {
  getSelect()
  try {
    const { data: result } = await getReservation(id)
    formValue.value = result
    state.title = '修改'
    state.isShow = true
  } catch (err) {
    console.log(err)
  } finally {
  }
}

// 新增提交
const addSub = async () => {
  const validate = await ruleFormRef.value.validate()
  if (!validate) return
  try {
    state.btnLoading = true
    await addReservation(formValue.value)

    close()
    getList()
    proxy.successMsg('新增成功!')
  } catch {
  } finally {
    state.btnLoading = false
  }
}

// 修改提交
const editSub = async () => {
  const validate = await ruleFormRef.value.validate()
  if (!validate) return
  try {
    state.btnLoading = true
    await updateReservation(formValue.value)
    getList()
    close()
    proxy.successMsg('修改成功!')
  } catch {
  } finally {
    state.btnLoading = false
  }
}

// 删除
const remove = async (ids) => {
  const is = await proxy.DelMessageBox('是否确认删除该数据？')
  if (!is) return
  try {
    proxy.$modal.loading('请稍后')
    await deldateAPI(ids)
    getList()
    proxy.successMsg('删除成功!')
  } catch {
  } finally {
    proxy.$modal.closeLoading()
  }
}

// 查看
const look = async (id) => {
  getSelect()
  try {
    const { data: result } = await getReservation(id)
    formValue.value = result
    state.title = '查看'
    state.disabled = true
    state.isShow = true
  } catch {
  } finally {
  }
}

// 成为接洽人
const yes = async (is, id) => {
  let content = ''
  if (is == 1) content = '是否确认成为接洽人？'
  if (is == 0) content = '是否确认取消接洽人？'
  const i = await proxy.MessageBox(content)
  if (!i) return
  try {
    await upExamineAPI({
      isExamine: is,
      id,
    })
    getList()
    proxy.successMsg('操作成功!请在对应的手机微信小程序刷新确认！')
  } catch {
  } finally {
  }
}

// 关闭
const close = () => {
  formValue.value = {}
  state.isShow = false
}

// 查询条件
const query = reactive({
  pageNum: 1,
  pageSize: 10,
})

const selectSubmit = (obj) => {
  Object.keys(obj).forEach((t) => (query[t] = obj[t]))
  getList()
}

// 获取列表
const getList = async () => {
  try {
    state.loading = true
    const result = await listAPI(query)
    tableData.value = result.rows
    state.total = result.total
  } catch {
  } finally {
    state.loading = false
  }
}

getList()
let tiemr = setInterval(() => {
  getList()
}, 5000)

onBeforeUnmount(() => {
  clearInterval(tiemr)
})
// 查询接待人下拉
const getSelect = async () => {
  try {
    const { data: result } = await getSelectAPI()
    receptionSel.value = result.map((t) => ({
      label: t.name,
      value: t.id,
    }))
  } catch {
  } finally {
  }
}
getSelect()
</script>

<template>
  <div class="app-container">
    <x-select-form :selectForm="selectForm" @selectSubmit="selectSubmit" />
    <el-button
      type="primary"
      @click="
        proxy.download(
          '/wx/system/user/export',
          {
            ...query,
          },
          `微信用户记录表${new Date().getTime()}.xlsx`
        )
      "
      >导出</el-button
    >
    <x-table
      keyId="id"
      :loading="state.loading"
      :column="column"
      :data="tableData"
      :total="state.total"
      v-model:page="query.pageNum"
      v-model:limit="query.pageSize"
      @pagination="getList"
    >
      <template #columnCell="{ column, record }">
        <div v-if="column.prop == 'isExamine'">
          <x-tag
            v-if="record.isExamine == '0'"
            bgc="#304156"
            text="没有审核资格"
          />
          <x-tag v-if="record.isExamine == '1'" bgc="#f7af77" text="待确认" />
          <x-tag
            v-if="record.isExamine == '2'"
            bgc="#a8d7ab"
            text="具有审核资格"
          />
        </div>
        <div v-if="column.prop == 'x'" class="operate">
          <el-link
            type="warning"
            @click="yes(1, record.id)"
            v-if="record.isExamine == '0'"
            >成为接洽人</el-link
          >
          <el-link
            type="danger"
            @click="yes(0, record.id)"
            v-if="record.isExamine == '2'"
            >取消接洽人</el-link
          >
          <el-link icon="DeleteFilled" type="danger" @click="remove(record.id)"
            >删除</el-link
          >
        </div>
      </template>
    </x-table>
    <x-dialog
      width="45rem"
      :title="state.title"
      :loading="state.btnLoading"
      v-model="state.isShow"
      @ok="state.title == '新增' ? addSub() : editSub()"
      @close="close"
    >
      <el-form
        inline
        ref="ruleFormRef"
        :model="formValue"
        :rules="rules"
        label-width="auto"
        label-position="right"
        status-icon
      >
        <el-form-item label="预约人" prop="reservationName">
          <el-input
            clearable
            :disabled="state.disabled"
            v-model="formValue.reservationName"
            placeholder="请填写预约人"
          />
        </el-form-item>
        <el-form-item label="联系方式" prop="contactInformation">
          <el-input
            clearable
            :disabled="state.disabled"
            v-model="formValue.contactInformation"
            placeholder="请填写联系方式"
          />
        </el-form-item>
        <el-form-item label="接待人" prop="receptionById">
          <el-select
            clearable
            :disabled="state.disabled"
            v-model="formValue.receptionById"
            placeholder="请填写接待人"
          >
            <el-option
              v-for="(t, ind) in receptionSel"
              :label="t.label"
              :value="t.value"
              :key="t.value"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="开始时间" prop="startTime">
          <el-date-picker
            v-model="formValue.startTime"
            value-format="YYYY-MM-DD"
            type="date"
            :disabled="state.disabled"
            placeholder="请选择开始时间"
          />
        </el-form-item>
        <el-form-item label="结束时间" prop="endTime">
          <el-date-picker
            v-model="formValue.endTime"
            value-format="YYYY-MM-DD"
            type="date"
            :disabled="state.disabled"
            placeholder="请选择结束时间"
          />
        </el-form-item>
        <div class="rk">
          <el-form-item label="事由" prop="reason">
            <el-input
              clearable
              :disabled="state.disabled"
              v-model="formValue.reason"
              :rows="3"
              type="textarea"
              placeholder="请输入事由"
            />
          </el-form-item>
        </div>
      </el-form>
    </x-dialog>
  </div>
</template>
<style scoped lang="scss">
.operate {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.rk ::v-deep .el-form-item {
  width: 100% !important;
}
</style>
